<script lang="ts" setup>
import VPIconSun from './icons/VPIconSun.vue';
import VPIconMoon from './icons/VPIconMoon.vue';
</script>
<template>
    <button class="VPSwitch" type="button" role="switch">
        <span class="check">
            <span class="icon" v-if="$slots.default">
                <slot />
            </span>
        </span>
        <div class="switch-bg">
            <span class="sun-bg"><VPIconSun /></span>
            <span class="moon-bg"><VPIconMoon /></span>
        </div>
    </button>
</template>

<style scoped>
.VPSwitch {
    position: relative;
    border-radius: 11px;
    display: block;
    padding: 0 2px;
    width: 44px;
    height: 22px;
    flex-shrink: 0;
    /* border: 1px solid var(--vp-c-divider);
  background-color: var(--vp-c-bg-mute); */
    transition: border-color 0.25s, background-color 0.25s;
}
.switch-bg {
    width: 40px;
    display: flex;
    position: absolute;
    z-index: 1;
    height: 22px;
    left:0;
    top:0;
}
.switch-bg span {
    display: block;
    position: relative;
    margin:1px 0 0 1px;
    width: 18px;
    height: 18px;
    text-align: center;
}
.switch-bg svg {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    fill: #848c9a;
}

.dark .VPSwitch {
    background: rgba(42, 135, 255, 0.26);
}
.VPSwitch:hover {
    border-color: var(--vp-c-gray);
}

.check {
    z-index: 20;
    position: absolute;
    top: 1px;
    left: 1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--vp-c-white);
    box-shadow: var(--vp-shadow-1);
    transition: background-color 0.25s, transform 0.25s;
}

/* .dark .check {
    background-color: var(--vp-c-black);
} */

.icon {
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0px 3px 20px 0px rgba(13, 17, 27, 0.1);
}

.icon :deep(svg) {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    fill: var(--vp-c-text-2);
}
.icon :deep(svg) {
    fill: #2a78ff;
}

/* .dark .icon :deep(svg) {
    fill: var(--vp-c-text-1);
    transition: opacity 0.25s;
} */
</style>
